<template>
  <div class="components-container main-cont">
    <div style="display: inline-block;font-size:18px;margin-bottom: 15px;">
      <a href="#" @click="prev" style="text-decoration:none;font-size: 14px;">
        <icon-svg name="jiantou" style="width: 1.2em;height: 1.2em;position: relative;top: 0.3em;"></icon-svg>
        返回
      </a>
      <span style="display: inline-block;margin: 0 15px;color: #D9D9D9;">|</span>
      <span>商品发布</span>
    </div>
    <div v-loading="tableDataLoading">
      <div style="position: relative;">
        <el-row>
          <el-col :span="8">
            <span>商品名称：</span>
            <el-input style="width: 200px;" class="margin15" placeholder="请输入商品标题" v-model="goodsName" autosize>
            </el-input>
          </el-col>
          <el-col :span="8">
            <span>商品分类：</span>
            <el-select v-model="classifyId" class="margin15" placeholder="请选择商品类型" style="width:200px;"
              @change="handleChange1">
              <el-option v-for="(item,index) in typeDatas" :key="index" :label="item.classifyName"
                :value="item.classifyId">
              </el-option>
            </el-select>
          </el-col>
          <!-- <el-col :span="6" >
				<span>商户号	：&nbsp;&nbsp;</span>
				<el-input style="width:200px;" class="margin15" placeholder="请输入商户号"  v-model="merchants" autosize></el-input>
			</el-col> -->
          <el-col :span="8">
            <span>商品原价：</span>
            <el-input style="width:200px;" class="margin15" placeholder="请输入商品原价" type="number" :min="0"
              :controls="false" v-model="originalMoney" autosize></el-input>
          </el-col>
          <el-col :span="8">
            <span>商品售价：</span>
            <el-input style="width:200px;" class="margin15" placeholder="请输入商品售价" type="number" :min="0"
              :controls="false" v-model="goodsMoney" autosize></el-input>
          </el-col>
          <el-col :span="8">
            <span>打包费：</span>
            <el-input style="width:200px;" class="margin15" placeholder="请输入打包费" type="number" :min="0"
              :controls="false" v-model="packMoney" autosize></el-input>
          </el-col>
          <el-col :span="8">
            <span>商品销量：</span>
            <el-input style="width:200px;" class="margin15" placeholder="请输入商品销量" type="number" :min="0"
              :controls="false" v-model="salesVolume" autosize></el-input>
          </el-col>
          <!-- <el-col :span="8">
            <span>库存：</span>
            <el-input style="width:200px;" class="margin15" placeholder="请输入库存" type="number" :min="0" :controls="false"
              v-model="inventory" autosize></el-input>
          </el-col> -->
          <!-- <el-col :span="8">
            <span>商品状态：</span>
            <el-select v-model="status" class="margin15" placeholder="请选择商品状态" style="width:200px;">
              <el-option v-for="(item,index) in statusmain2" :key="item.index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col> -->
          <el-col :span="8">
            <span>商品简介：</span>
            <el-input style="width:200px;" class="margin15" placeholder="请输入商品简介" type="text" :controls="false"
              v-model="goodsDescribe" autosize></el-input>
          </el-col>

        </el-row>
        <el-row>

          <!-- <el-col :span="6">
          <span>会员价格：</span>
          <el-input style="width:200px;" class="margin15" placeholder="请输入会员价格" type="number" :min="0" :controls="false"
            v-model="memberPrice" autosize></el-input>
        </el-col>
        <el-col :span="6">
          <span>商品佣金：</span>
          <el-input style="width:200px;" class="margin15" placeholder="例0.1 等于10%" type="number" :min="0"
            :controls="false" v-model="commissionPrice" autosize></el-input>
        </el-col> -->

        </el-row>
        <el-row>
          <!-- <el-col :span="6">
          <span>必买理由：</span>
          <el-input style="width:200px;" class="margin15" placeholder="请输入必买理由" v-model="buyReason" autosize></el-input>
        </el-col>
        <el-col :span="6" style="margin-top: 20px;">
          <span>精选好物：</span>
          <el-radio-group v-model="isSelect">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="6" style="margin-top: 20px;">
          <span>首页商品：</span>
          <el-radio-group v-model="homeGoods">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="6" style="margin-top: 20px;">
          <span>每日推荐：</span>
          <el-radio-group v-model="isRecommend">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-col> -->
        </el-row>
        <el-row>
          <!-- <el-col :span="6">
          <span>是否发货：</span>
          <el-select v-model="isExpress" class="margin15" placeholder="请选择商品是否发货" style="width:200px;">
            <el-option v-for="(item,index) in isExpressmain" :key="item.index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <span>商品品牌：</span>
          <el-select v-model="brandId" class="margin15" placeholder="请选择商品品牌" style="width:200px;">
            <el-option v-for="(item,index) in  brandIds" :key="item.index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col> -->
          <el-col :span="24">
            <div style="margin-top: 10px;">
              <span>商品标签：</span>
              <span class="bqList" v-for="(item,index) in labels" :key="index">{{item}}
                <span class="delss">
                  <i class="el-icon-delete" @click="dels1(index)"></i>
                </span>
              </span>
              <el-input v-model="bq" style="width:200px;" placeholder="请输入标签"
                onkeyup="this.value=this.value.replace(/[, ]/g,'')"></el-input>
              <!-- <button class="tj" @click="btnTj">添加标签</button> -->
              <el-button type="primary" class="tj" size="mini" icon="el-icon-edit" circle @click="btnTj">
              </el-button>
            </div>
          </el-col>
        </el-row>
        <div style="display: flex;align-items: center;margin: 2% 0;">
          <span style="display: inline-block;text-align: right;">商品封面图：</span>
          <div
            style=" width:148px;height:148px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
            <el-upload class="avatar-uploader" v-model="goodsCover"
              action="https://tcwmadmin.xianmaxiong.com/sqx_fast/alioss/upload" :show-file-list="false"
              :on-success="handleAvatarSuccess1">
              <img v-if="goodsCover" :src="goodsCover" class="avatar" style="width: 148px;height: 148px;" />
              <i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 28px;color: #8c939d"></i>
            </el-upload>
          </div>
        </div>
        <div style="display: flex;align-items: center;margin: 2% 0;flex-flow: wrap;">
          <span style="display: inline-block;text-align: right;">商品轮播图：</span>
		  
		  <div v-for="(item,index) of potost">
		    <div style="position: relative;margin: 5px;">
		      <img :src="item" class="avatar" style="width:148px;height: 148px;" />
		      <div @click="handleRemove(index)" class="divhove">
		        <i class="el-icon-delete" style="margin: 0;font-size: 18px;color: #fff;"></i>
		      </div>
		    </div>
		  </div>
		  <div class="imgs" style="width: 50%;">
		    <el-upload action="https://tcwmadmin.xianmaxiong.com/sqx_fast/alioss/upload" list-type="picture-card"
		      :show-file-list="false" :on-success="handleUploadSuccess" :on-progress="onprogress1">
		      <el-progress v-if="percentage1>0 && percentage1<100" type="circle" :percentage="percentage1">
		      </el-progress>
		      <i v-else class="el-icon-plus"></i>
		    </el-upload>
		    <el-dialog :visible.sync="dialogVisible">
		      <img width="100%" :src="dialogImageUrl" alt="">
		    </el-dialog>
		  </div>
		  
		  
		  
		  
		  
          <!-- <div>
            <el-upload action="https://tcwmadmin.xianmaxiong.com/sqx_fast/alioss/upload" list-type="picture-card"
              :on-success="handleUploadSuccess" :on-change="handleChange" :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
          </div> -->
        </div>
        <div style="display: flex;align-items: center;margin: 2% 0;">
          <span style="display: inline-block;text-align: right;">商品规格：</span>
          <el-radio-group v-model="guige" @change="guigeChange">
            <el-radio :label="0">单规格</el-radio>
            <el-radio :label="1">多规格</el-radio>
          </el-radio-group>
          <div v-if="guigeshow" style="margin-left: 20px;">
            <el-select v-model="ruleId" placeholder="请选择商品规格" style="width:200px;" @change="selectTrigger(ruleId)">
              <el-option v-for="(item,index) in specifdata" :key="item.index" :label="item.ruleName" :value="item.id">
              </el-option>
            </el-select>
          </div>

        </div>
        <div v-if="ruleValue" style="margin-left: 70px;">
          <div class="ruleitem" v-for="(item,index) in ruleValue" :key="index">
            <div>{{item.value}} <span @click="deleterule(index)">
                <icon-svg name="schu" class="ruleicon"></icon-svg>
              </span></div>
            <div>
              <el-tag :key="tag" v-for="(tag,j) in item.detail.split(',')" closable :disable-transitions="false"
                @close="handleClose(tag,j,item)">
                {{tag}}
              </el-tag>
              <el-input class="input-new-tag" v-model="inputValues[index]" ref="saveTagInput" size="small"
                style="width:120px;" placeholder="请输入属性名" @keyup.enter.native="handleInputConfirm(index,item)">
              </el-input>
              <el-button class="button-new-tag" size="small" @click="handleInputConfirm(index,item)">添加</el-button>
            </div>
          </div>
          <div style="margin-top:20px;" v-if="ruleshow">
            <div v-if="isshow" class="btn_specif">
              <el-button type="primary" @click="btnToclick()">添加新规格</el-button>
              <el-button type="success" @click="create()">立即生成</el-button>
            </div>
          </div>
          <div style="margin-top:10px;">
            <div v-if="!isshow" style="margin-top: 20px;">
              <div style="display: inline-block;">
                <span style="width:80px;display: inline-block;text-align: right;">规格：</span>
                <el-input style="width:50%;" v-model="releobject.value" placeholder="例:颜色"></el-input>
              </div>
              <div style="display: inline-block;">
                <span style="width:80px;display: inline-block;text-align: right;">规格值：</span>
                <el-input style="width:50%;" v-model="releobject.detail" placeholder="例:黑色"></el-input>
              </div>
              <div style="display: inline-block;">
                <el-button type="primary" @click="speciTo()">确 定</el-button>
                <el-button @click="speciTotwo()">取 消</el-button>
              </div>
            </div>
          </div>
        </div>
        <div style="display: flex;margin-top: 20px;" v-if="propshow">
          <span>商品属性：</span>
          <div class="property_table">
            <table style="width: 100%;">
              <tr style="display:flex;">
                <th style="width:120px;text-align: left;" v-for="item in headerData" v-if="item!='图片'">{{item}}</th>
              </tr>
            </table>
            <el-table :data="valueData">
              <el-table-column v-if="detailJson.length == 1" prop="value0" width="120">
              </el-table-column>
              <el-table-column v-if="detailJson.length == 2" prop="value0" width="120">
              </el-table-column>
              <el-table-column v-if="detailJson.length == 2" prop="value1" width="120">
              </el-table-column>
              <el-table-column v-if="detailJson.length == 3" prop="value0" width="120">
              </el-table-column>
              <el-table-column v-if="detailJson.length == 3" prop="value1" width="120">
              </el-table-column>
              <el-table-column v-if="detailJson.length == 3" prop="value2" width="120">
              </el-table-column>
              <el-table-column v-if="detailJson.length == 4" prop="value0" width="120">
              </el-table-column>
              <el-table-column v-if="detailJson.length == 4" prop="value1" width="120">
              </el-table-column>
              <el-table-column v-if="detailJson.length == 4" prop="value2" width="120">
              </el-table-column>
              <el-table-column v-if="detailJson.length == 4" prop="value3" width="120">
              </el-table-column>
              <el-table-column v-if="detailJson.length == 5" prop="value0" width="120">
              </el-table-column>
              <el-table-column v-if="detailJson.length == 5" prop="value1" width="120">
              </el-table-column>
              <el-table-column v-if="detailJson.length == 5" prop="value2" width="120">
              </el-table-column>
              <el-table-column v-if="detailJson.length == 5" prop="value3" width="120">
              </el-table-column>
              <el-table-column v-if="detailJson.length == 5" prop="value4" width="120">
              </el-table-column>
              <!-- <el-table-column prop="skuImg" width="100">
                <template slot-scope="scope">
                  <div class="imgWrap"
                    style=" width:60px;height:60px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 60px;">
                    <el-upload style="width: 60px;height: 60px;" class="avatar-uploader" v-model="scope.row.skuImg"
                      action="https://tcwmadmin.xianmaxiong.com/sqx_fast/alioss/upload" :show-file-list="false"
                      :on-success="handleAvatarSuccess">
                      <img v-if="scope.row.skuImg" :src="scope.row.skuImg" class="avatar"
                        style="border-radius: 6px;width:60px;height: 60px;" @click="curRowIndex=scope.$index" />
                      <i v-else class="el-icon-plus avatar-uploader-icon" @click="curRowIndex=scope.$index"></i>
                    </el-upload>
                  </div>
                </template>
              </el-table-column> -->
              <el-table-column prop="skuOriginalPrice" width="120">
                <template slot-scope="scope">
                  <div>
                    <el-input type="text" v-model="scope.row.skuOriginalPrice" style="width:80px;font-size:14px;">
                    </el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="skuPrice" width="120">
                <template slot-scope="scope">
                  <div>
                    <el-input type="text" v-model="scope.row.skuPrice" style="width:80px;font-size:14px;">
                    </el-input>
                  </div>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="memberPrice" width="120">
              <template slot-scope="scope">
                <div>
                  <el-input type="text" v-model="scope.row.memberPrice" style="width:80px;font-size:14px;">
                  </el-input>
                </div>
              </template>
            </el-table-column> -->
              <!-- <el-table-column prop="stock" width="120">
              <template slot-scope="scope">
                <div>
                  <el-input type="text" v-model="scope.row.stock" style="width:80px;font-size:14px;">
                  </el-input>
                </div>
              </template>
            </el-table-column> -->
              <!-- <el-table-column prop="salesVolume" width="120">
              <template slot-scope="scope">
                <div>
                  <el-input type="text" v-model="scope.row.salesVolume" style="width:80px;font-size:14px;">
                  </el-input>
                </div>
              </template>
            </el-table-column> -->
              <el-table-column width="120">
                <template slot-scope="scope">
                  <el-button :disabled="!isAuth('userList:delete')" size="mini" type="danger"
                    @click="deleter(scope.$index)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div style="display: flex;margin-top: 20px;padding-top: 30px;" v-if="propshow1">
          <span>商品属性：</span>
          <div class="property_table">
            <table style="width: 100%;">
              <tr style="display:flex;">
                <th style="width:150px;text-align: left;" v-for="item in headerData2" v-if="item!='图片'">{{item}}</th>
              </tr>
            </table>
            <el-table :data="valueData2">
              <!-- <el-table-column prop="skuImg" width="150">
                <template slot-scope="scope">
                  <div class="imgWrap"
                    style=" width:60px;height:60px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 60px;">
                    <el-upload style="width: 60px;height: 60px;" class="avatar-uploader" v-model="scope.row.skuImg"
                      action="https://tcwmadmin.xianmaxiong.com/sqx_fast/alioss/upload" :show-file-list="false"
                      :on-success="handleAvatarSuccess3">
                      <img v-if="scope.row.skuImg" :src="scope.row.skuImg" class="avatar"
                        style="border-radius: 6px;width:60px;height: 60px;" @click="curRowIndex=scope.$index" />
                      <i v-else class="el-icon-plus avatar-uploader-icon" @click="curRowIndex=scope.$index"></i>
                    </el-upload>
                  </div>
                </template>
              </el-table-column> -->
              <el-table-column prop="skuOriginalPrice" width="150">
                <template slot-scope="scope">
                  <div>
                    <el-input type="text" v-model="scope.row.skuOriginalPrice" style="width:80px;font-size:14px;">
                    </el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="skuPrice" width="150">
                <template slot-scope="scope">
                  <div>
                    <el-input type="text" v-model="scope.row.skuPrice" style="width:80px;font-size:14px;">
                    </el-input>
                  </div>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="memberPrice" width="150">
              <template slot-scope="scope">
                <div>
                  <el-input type="text" v-model="scope.row.memberPrice" style="width:80px;font-size:14px;">
                  </el-input>
                </div>
              </template>
            </el-table-column> -->
              <!-- <el-table-column prop="stock" width="150">
              <template slot-scope="scope">
                <div>
                  <el-input type="text" v-model="scope.row.stock" style="width:80px;font-size:14px;">
                  </el-input>
                </div>
              </template>
            </el-table-column> -->
              <!-- <el-table-column prop="salesVolume" width="150">
              <template slot-scope="scope">
                <div>
                  <el-input type="text" v-model="scope.row.salesVolume" style="width:80px;font-size:14px;">
                  </el-input>
                </div>
              </template>
            </el-table-column> -->
            </el-table>
          </div>
        </div>
        <!-- <div style="height: 38px;line-height: 38px;margin:20px 0;">
        <span>是否包邮：</span>
        <el-radio-group v-model="positage" @change="agreeChange">
          <el-radio :label="0">是</el-radio>
          <el-radio :label="1">否</el-radio>
          <el-input v-if="priceshow" style="width:200px;margin-left: 10px;" placeholder="请输入邮费" type="number"
            v-model="postagePrice" autosize></el-input>
        </el-radio-group>
      </div> -->
      </div>
      <div class="tinymce-content" style="display: flex;">
        <div style="width:90px;">商品详情：</div>
        <!-- <textarea id="tinymceId" :value="goodsDescribe" class="tinymce-textarea" /> -->
        <!-- <quill-editor ref="myTextEditor" v-model="goodsSynopsis" :options="quillOption"
          style="padding-bottom: 50px;height: 300px;width: 72%;display: inline-table;margin-bottom: 60px;">
        </quill-editor> -->
        <div v-for="(item,index) of goodsParticularsPicture">
          <div style="position: relative;margin: 5px;">
            <img :src="item" class="avatar" style="width:148px;height: 148px;" />
            <div @click="clearXq(index)" class="divhove">
              <i class="el-icon-delete" style="margin: 0;font-size: 18px;color: #fff;"></i>
            </div>
          </div>
        </div>
        <div class="imgs" style="width: 50%;">
          <el-upload action="https://tcwmadmin.xianmaxiong.com/sqx_fast/alioss/upload" list-type="picture-card"
            :show-file-list="false" :on-success="handleUploadSuccessXq" :on-progress="onprogress1">
            <el-progress v-if="percentage1>0 && percentage1<100" type="circle" :percentage="percentage1">
            </el-progress>
            <i v-else class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>
      </div>
      <div style="text-align: center;margin-top:30px;">
        <el-button style='margin:0 20px 0 0;' size="mini" type="primary" icon="document" @click="prev">返回上一页
        </el-button>
        <el-button size="mini" type="primary" icon="document" @click="artiReleass">发布商品
        </el-button>
      </div>
    </div>

  </div>
</template>

<script>
  import {
    quillEditor
  } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import quillConfig from './quill-config.js'

  export default {
    components: {
      quillEditor
    },
    name: 'Tinymce',
    data() {
      return {
        specif: '',
        typeId: '',
        goodsName: '',
        classifyId: '',
        merchants: '',
        originalMoney: '',
        goodsMoney: '',
        packMoney: '',
        goodsSynopsis: '',
        memberPrice: '',
        inventory: '', //库存
        labels: [], //标签集合
        bq: '', //输入的标签名
        positage: 1,
        guige: 1,
        skuImg: '',
        ruleId: '',
        postagePrice: '',
        priceshow: true,
        isshow: true,
        commissionPrice: '',
        buyReason: '',
        ruleshow: false,
        propshow: false,
        guigeshow: true,
        propshow1: false,
        tableDataLoading: false,
        ruleValue: [],
        attr: [],
        attrs: [],
        headerData: [],
        valueData: [],
        detailJson: [],
        inputValues: {
          inputValue0: '',
          inputValue1: '',
          inputValue2: '',
          inputValue3: '',
          inputValue4: '',
          inputValue5: ''
        },
        sku: [],
        img: '',
        salesVolume: '',
        status: 0,
        goodsPicture: '',
        typeDatas: [],
        value: [],
        isSelect: 1,
        homeGoods: 1,
        isRecommend: 1,
        isExpress: '',
        goodsCover: '',
        valueData2: [],
        headerData2: [],
        statusmain2: [{
            value: 0,
            label: '上架'
          },
          {
            value: 1,
            label: '下架'
          }
        ],
        isExpressmain: [{
            value: 1,
            label: '普通商品需要发货'
          },
          {
            value: 2,
            label: '虚拟商品无需发货'
          },
          {
            value: 3,
            label: '商铺核销无需发货'
          }
        ],
        attrName: '',
        ruleName: '',
        attrValue: [],
        releobject: {
          value: '',
          detail: ''
        },
        brandId: '',
        brandIds: [],
        specifdata: [],
        dialogVisible: false,
        isShow: false,
        hideUpload: false,
        limit: 1,
        id: '',
        hasChange: false,
        hasInit: false,
        tinymceId: 'tinymceId',
        height: 435,
        toolbar: [],
        menubar: 'file edit insert view format table',
        languageTypeList: {
          'en': 'en',
          'zh': 'zh_CN'
        },
        artiCletypes: [],
        // 富文本内容
        quillOption: quillConfig,
        goodsDescribe: '',
        potost: [],
        shopId: '',
        goodsParticularsPicture:[],//商品详情图
        percentage1: 0, //进度条
        dialogImageUrl: [],
        dialogVisible: false,
      }
    },

    methods: {
      // 图标上传
      handleAvatarSuccess(file) {
        if (this.curRowIndex == 0) {
          this.skuImg = file.data;
          this.valueData[0].skuImg = this.skuImg
          return
        } else {
          this.skuImg = file.data;
          this.valueData[this.curRowIndex].skuImg = this.skuImg
        }
      },
      // 图标上传
      handleAvatarSuccess3(file) {
        this.skuImg = file.data;
        this.valueData2[0].skuImg = this.skuImg
      },
      // 是否包邮
      agreeChange(val) {
        if (val == 1) {
          this.priceshow = true
          this.postagePrice = ''
        } else {
          this.priceshow = false
          this.postagePrice = 0
        }
      },
      // 是否多规格
      guigeChange(val) {
        if (val == 1) {
          this.ruleId = ''
          this.guigeshow = true
          this.propshow1 = false
        } else {
          this.ruleId = 0
          this.guigeshow = false
          this.propshow1 = true
          this.propshow = false
          this.ruleshow = false
          this.attr = []
          this.ruleValue = []
          this.guigeclect()
        }
      },
      // 单规格
      guigeclect() {
        if (this.originalMoney == '') {
          this.originalMoney = '0'
        }
        if (this.goodsMoney == '') {
          this.goodsMoney = '0'
        }
        this.$http({
          url: this.$http.adornUrl('admin/goods/onlyFormatAttr'),
          method: 'get',
          params: this.$http.adornParams({
            'originalPrice': this.originalMoney,
            'price': this.goodsMoney,
            // 'coverImg': this.goodsCover,
          })
        }).then(({
          data
        }) => {
          let returnData = data.data;
          this.headerData2 = returnData.header
          this.valueData2 = returnData.value
          this.propshow = false
          this.propshow1 = true
          this.sku = returnData.value
        })
      },
      handleChange1(value) {
        this.classifyId = value;
      },
      handleChange(file, fileList) {
        this.hideUpload = fileList.length >= this.limit;
      },
      handleRemove(index) {
        // console.log(file, '删除', fileList)
        // this.hideUpload = fileList.length >= this.limit;
        // for (var i in this.potost) {
        //   if (this.potost[i] == file.response.data) {
            this.potost.splice(index, 1);
        //   }
        // }
        console.log('this.potost', this.potost)
      },
      handleAvatarSuccess1(file, fileList) {
        this.goodsCover = file.data
      },
      //上传成功
      handleUploadSuccess(file, fileList) {
        // this.goodsPicture += file.data + ','
        this.potost.push(file.data)
      },
      // 返回上一级
      prev() {
				this.goodsName = ''
				this.type = ''
				this.merchants = ''
				this.goodsMoney = ''
				this.packMoney = ''
				this.goodsSynopsis = ''
				this.memberPrice = ''
				this.inventory = ''
				this.originalMoney = ''
				this.salesVolume = ''
				this.goodsDescribe = ''
				this.postagePrice = ''
				this.status = ''
				this.buyReason = ''
				this.brandId = ''
				this.potost = []
				this.classifyId = ''
				this.goodsCover = ''
				this.sku = []
				this.attr = []
				this.labels = []
				this.guige = 1
				this.goodsParticularsPicture = []
				this.ruleId = ''
				this.ruleValue = []
				this.valueData = []
				this.valueData2 = []
				this.propshow = false
				this.propshow1 = false
				this.isshow = true
				this.ruleshow = false
        this.$router.back()
      },
      // 添加标签
      btnTj() {
        if (this.bq == '' || this.bq == ' ') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请输入标签名',
            type: 'warning'
          });
          return
        } else {
          console.log('this.bq', this.bq)
          this.labels.push(this.bq)
          this.bq = ''
        }

      },
      // 删除标签
      dels1(index) {
        this.labels.splice(index, 1);
        console.log(this.labels)
      },
      // 发布商品
      artiReleass() {
        let photost = this.potost.toString()
        console.log(this.goodsDescribe)
        console.log(this.potost.toString())

        // photost = photost.substr(0, photost.length - 1)
        let goodsLabel = this.labels.toString()
		if (this.goodsLabel == '') {
		  this.$notify({
		    title: '提示',
		    duration: 1800,
		    message: '请输入标签',
		    type: 'warning'
		  });
		  return
		}
        if (this.goodsName == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请输入商品标题',
            type: 'warning'
          });
          return
        }
        if (this.classifyId == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请选择商品类型',
            type: 'warning'
          });
          return
        }
        if (this.originalMoney == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请输入商品原价',
            type: 'warning'
          });
          return
        }
        // if (this.originalMoney < 1) {
        //   this.$notify({
        //     title: '提示',
        //     duration: 1800,
        //     message: '商品原价不能小于1元',
        //     type: 'warning'
        //   });
        //   return
        // }
        if (this.goodsMoney == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请输入折扣价格',
            type: 'warning'
          });
          return
        }
        if (this.packMoney == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请输入打包费',
            type: 'warning'
          });
          return
        }
        if (this.goodsDescribe == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请输入简介',
            type: 'warning'
          });
          return
        }


        if (this.salesVolume == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请输入商品销量',
            type: 'warning'
          });
          return
        }
		if(this.guige==1){
			if (this.ruleId === 0||this.ruleId ==='') {
			  this.$notify({
			    title: '提示',
			    duration: 1800,
			    message: '请选择商品规格',
			    type: 'warning'
			  });
			  return
			}
		}

        if (this.goodsCover == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请选择商品封面图',
            type: 'warning'
          });
          return
        }
        if (this.goodsDescribe == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请输入商品详情',
            type: 'warning'
          });
          return
        }
        // if (this.inventory == '') {
        //   this.$notify({
        //     title: '提示',
        //     duration: 1800,
        //     message: '请输入库存',
        //     type: 'warning'
        //   });
        //   return
        // }
        if (this.sku.length == 0) {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请选择商品规格',
            type: 'warning'
          });
          return
        }
				if (this.goodsParticularsPicture.length == 0) {
				  this.$notify({
				    title: '提示',
				    duration: 1800,
				    message: '请上传商品详情图',
				    type: 'warning'
				  });
				  return
				}
        this.tableDataLoading = true
				if(this.guige==0){
					this.sku = this.valueData2
					console.log('----',this.valueData2)
				}else{
					this.sku = this.valueData
				}
        this.$http({
          url: this.$http.adornUrl('admin/goods/insertGoods'),
          method: 'post',
          data: this.$http.adornData({
            'goodsPicture': photost,
            'goodsName': this.goodsName,
            'classifyId': this.classifyId,
            'originalMoney': this.originalMoney,
            'goodsMoney': this.goodsMoney,
            'packMoney': this.packMoney,
            'goodsSynopsis': this.goodsSynopsis,
            'memberPrice': this.memberPrice,
            'inventory': this.inventory,
            'salesVolume': this.salesVolume,
            'status': this.status,
            'goodsCover': this.goodsCover,
            'goodsDescribe': this.goodsDescribe,
            'postagePrice': this.postagePrice,
            'sku': this.sku,
            'attr': this.attr,
            'goodsLabel': goodsLabel,
            'shopId': this.shopId,
						'goodsParticularsPicture':this.goodsParticularsPicture.toString()
          })
        }).then(({
          data
        }) => {
          if (data.code == 0) {
            this.tableDataLoading = false
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
					this.prev()
                
              }
            })
          } else {
            this.tableDataLoading = false
            this.$message({
              message: data.msg,
              type: 'warning',
              duration: 1500,
              onClose: () => {}
            })
          }

        })
      },

      // 商品分类
      dataSelect() {
        this.tableDataLoading = true
        this.$http({
          url: this.$http.adornUrl('admin/goods/selectAllClassify'),
          method: 'get',
          params: this.$http.adornParams({
             'shopId':this.shopId
          })
        }).then(({
          data
        }) => {
          this.tableDataLoading = false
          let returnData = data.data;
          this.typeDatas = returnData
        })
      },
      // 商品规格
      specifSelect() {
        this.$http({
          url: this.$http.adornUrl('selfGoodsRule/list'),
          method: 'get',
          params: this.$http.adornParams({
			  'shopId':this.shopId
		  })
        }).then(({
          data
        }) => {
          let returnData = data.data;
          this.specifdata = returnData;
        })
      },
      // 删除商品属性
      deleter(index) {
        let length = this.sku.length
        if (length == 1) {
          this.$message({
            title: '提示',
            type: 'error',
            duration: 1800,
            message: '属性至少要有一个',
            type: 'warning'
          });
          return
        } else {
          this.sku.splice(index, 1);
        }
      },
      // 查询商品规格
      selectTrigger(val) {
        this.$http({
          url: this.$http.adornUrl('selfGoodsRule/find'),
          method: 'get',
          params: this.$http.adornParams({
            'id': val
          })
        }).then(({
          data
        }) => {
          let returnData = data.data;
          this.ruleValue = returnData.ruleValue
          this.attrName = returnData.ruleName
          this.ruleshow = true
          this.ruleId = returnData.id
          this.create()
        })
      },
      deleterule(index) {
        this.ruleValue.splice(index, 1);
      },
      btnToclick() {
        this.isshow = false
        this.releobject.value = ''
        this.releobject.detail = ''
      },
      speciTotwo() {
        this.isshow = true
        this.releobject.value = ''
        this.releobject.detail = ''
      },
      speciTo() {
        if (this.releobject.value == '') {
          this.$message({
            title: '提示',
            type: 'error',
            duration: 1800,
            message: '请输入规格',
            type: 'warning'
          });
          return
        }
        if (this.releobject.detail == '') {
          this.$message({
            title: '提示',
            duration: 1800,
            type: 'error',
            message: '请输入规格值',
            type: 'warning'
          });
          return
        }
        this.ruleValue.push({
          value: this.releobject.value,
          detail: this.releobject.detail
        });
        this.isshow = true
        this.releobject.value = ''
        this.releobject.detail = ''
      },
      handleClose(tag, j, item) {
        var detailarr = item.detail.split(',')
        detailarr.splice(j, 1);
        if (detailarr.length < 1) {
          this.$message({
            title: '提示',
            type: 'error',
            duration: 1800,
            message: '规格值至少要有一个',
            type: 'warning'
          });
          return
        } else {
          item.detail = String(detailarr)
        }
      },
      handleInputConfirm(index, item) {
        let inputValue = this.inputValues[index];
        if (inputValue) {
          var detailarr = item.detail.split(',')
          detailarr.push(inputValue)
          for (var i = 0; i < detailarr.length; i++) {
            for (var j = 0; j < detailarr.length; j++) {
              if (detailarr[i] == detailarr[j] && i != j) {
                detailarr.splice(j, 1);
              }
            }
          }
          item.detail = String(detailarr)
          this.inputValues[index] = '';
        }
        this.inputVisible = false;
      },
      // 获取品牌
      // brandSelect() {
      //   let page = this.page - 1
      //   this.tableDataLoading = true
      //   this.$http({
      //     url: this.$http.adornUrl('selfGoodsBrand/result'),
      //     method: 'get',
      //     params: this.$http.adornParams({})
      //   }).then(({
      //     data
      //   }) => {
      //     this.tableDataLoading = false
      //     let returnData = data.data;
      //     this.brandIds = returnData
      //   })
      // },
      // 立即生成
      create() {
        this.attr = []
        this.attr.push({
          attrName: this.attrName,
          attrValue: this.ruleValue,
          ruleId: this.ruleId
        })
        if (this.originalMoney == '') {
          this.originalMoney = '0'
        }
        if (this.goodsMoney == '') {
          this.goodsMoney = '0'
        }
        if (this.memberPrice == '') {
          this.memberPrice = '0'
        }
        this.$http({
          url: this.$http.adornUrl(
            // `admin/goods/isFormatAttr?coverImg=${this.goodsCover}&originalPrice=${this.originalMoney}&price=${this.goodsMoney}`
             `admin/goods/isFormatAttr?originalPrice=${this.originalMoney}&price=${this.goodsMoney}`
          ),
          method: 'post',
          data: this.attr[0]
        }).then(({
          data
        }) => {
          let returnData = data.data;
          this.headerData = returnData.header
          this.valueData = returnData.value
          this.propshow = true
          this.propshow1 = false
          this.sku = returnData.value
          this.detailJson = returnData.value[0].detailJson.split(',')
        })
      },
      // 删除详情图
      clearXq(index) {
        this.goodsParticularsPicture.splice(index, 1);
      },
      //上传成功
      handleUploadSuccessXq(file, fileList) {
         this.goodsParticularsPicture.push(file.data)
      },
      onprogress1(event, file, fileList) {
        console.log('详情图上传进度', parseInt(event.percent))
        this.percentage1 = parseInt(event.percent)
      },
	  dataSelectO(){
		  this.dataSelect()
		  this.specifSelect()
	  },
    },
    mounted() {
      this.shopId = this.$route.query.shopId
      console.log('shopId:', this.shopId)
      // this.init()
      this.dataSelect()
      this.specifSelect()
      this.goodsName = ''
      this.type = ''
      this.merchants = ''
      this.goodsMoney = ''
      this.packMoney = ''
      this.goodsSynopsis = ''
      this.memberPrice = ''
      this.inventory = ''
      this.originalMoney = ''
      this.salesVolume = ''
      this.goodsDescribe = ''
      this.postagePrice = ''
      this.status = ''
      this.buyReason = ''
      this.brandId = ''
      // this.brandSelect()
    },
    watch: {
    	'$route': 'dataSelectO'
    
    }
  }
</script>

<style scoped="scoped">
  .main-cont {
    max-width: 100%;
    min-width: 80%;
    padding-bottom: 5%;
    background-color: #fff;
  }

  .tinymce-container {
    position: relative;
    line-height: normal;
  }

  .tinymce-container>>>.mce-fullscreen {
    z-index: 10000;
  }

  .tinymce-textarea {
    visibility: hidden;
    z-index: -1;
  }

  .hide .el-upload--picture-card {
    display: none;
  }

  .margin15 {
    margin-right: 15px;
    margin-top: 10px;
  }

  .ruleitem {
    padding-left: 10px;
    margin-top: 15px;
  }

  .ruleitem .ruleicon {
    position: relative;
    top: 3px;
    left: 2px;
    width: 1.2em;
    height: 1.2em;
  }

  .el-tag+.el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    height: 32px;
    line-height: 31px;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background-color: #f5f7fa;
    position: relative;
    left: -5px;
    border-color: #dcdfe6;
    border: 1px solid #dcdfe6;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .el-input--small .el-input__inner {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .el-table--enable-row-transition .el-table__body td {
    text-align: center;
  }

  .imgWrap .avatar-uploader .el-upload {
    width: 60px;
  }

  .el-table .cell {
    text-align: center !important;
  }

  .el-tag--medium {
    margin-right: 10px;
  }

  .bqList {
    padding: 4px 14px;
    margin: 4px;
    border: 1px solid #efefef;
    font-size: 12px;
    color: #999;
    border-radius: 4px;
    margin-right: 15px;
  }

  .delss {
    display: none;
    position: relative;
  }

  .delss .el-icon-delete {
    position: absolute;
    top: 0;
  }

  .bqList:hover .delss {
    display: initial;
    opacity: 0.5;

  }

  .tj {
    padding: 6px !important;
    margin: 4px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .divhove {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: default;
    text-align: center;
    padding-top: 50%;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
  }

  .el-tag--medium {
    margin-right: 10px;
  }

  .divhove:hover {
    opacity: 0.8;
  }
</style>
